<template>
  <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, sizes,jumper"
        :total="counts"
      >
      </el-pagination>
</template>

<script>
export default {
  props: {
    counts: {
      type: Number,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    }
  }
}
</script>

<style scoped lang='scss'></style>
